<template>
  <div class="boxxx">
    <div class="tagTitle">
      <b style="margin-left: 20px">recommendToReading</b>
    </div>
    <div class="rightBox-Remmoend">
      <ul v-for="(item, index) in arrSwiper" :key="index">
        <li
          @click="golistDet(item.id)"
          style="font-size: 14px; margin-left: 20px"
        >
          {{ item.title }} · 12 天前
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { GetData } from "../api/index";
export default {
  data() {
    return {
      swiperArr: [],
      arrSwiper: [],
    };
  },
  mounted() {
    this.GetData();
  },
  methods: {
    async GetData() {
      const { data } = await GetData();
      this.arrSwiper = data.data;
      console.log(data.data);
    },
    golistDet(id) {
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.boxxx {
  width: 100%;
  height: 100%;
}
.tagTitle {
  width: 318px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-bottom: 1px solid #f4f4f4;
}
.tagTitle b {
  margin-top: 8px;
  position: absolute;
  margin-left: 5px;
}
.rightBox-Remmoend li:hover {
  color: red;
}
.rightBox-Remmoend li {
  width: 300px;
  height: 32px;
  // 文字溢出部分显示...
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rightBox-Remmoend .vscode {
  color: #000000a6;
}
.rightBox1 ul li {
  margin-top: 20px;
}
.bbton {
  width: 318px;
  height: 40px;
  font-size: 18px;
  border-bottom: 1px solid #f4f4f4;
  position: relative;
}
.bbton b {
  margin-top: 8px;
  position: absolute;
  margin-left: 5px;
}
.rightBox-Remmoend {
  width: 318px;
  height: 220px;
  margin-bottom: 20px;
}
.rightBox-Remmoend ul li {
  margin-top: 6px;
}

.remonendBox {
  animation: wrapper-gradient 2s linear;
}
.titleArr {
  animation: wrapper-gradient 2s linear;
}
@keyframes wrapper-gradient {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes img-gradient {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
